<template>
  <div class="app-container">
    <el-tabs
      v-model="queryParams.bizType"
      class="demo-tabs"
      @tab-change="changeTab"
    >
      <el-tab-pane
        v-for="item in tabs"
        :key="item.value"
        :label="item.name"
        :name="item.value"
      ></el-tab-pane>
    </el-tabs>
    <div v-if="queryParams.bizType == 'BUY_BALANCE'">
      <el-row :gutter="24" class="mb8 ml8">
        <el-button type="primary" class="handleAdd" @click="handleAdd">
          新增
        </el-button>
      </el-row>
      <el-table v-loading="loading" :data="typeList">
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column label="发放贡献值" align="center" prop="score">
          <template #default="scope">
            {{ scope.row.score + "%" }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="left" prop="remark" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <a
              href="javascript:;"
              style="color: #358de5; text-decoration: none; margin-right: 10px"
              @click="handleEdit(scope.row)"
              >编辑</a
            >
            <a
              href="javascript:;"
              style="color: #fcb80b; text-decoration: none; margin-right: 10px"
              @click="handleCancel(scope.row)"
              >删除</a
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="queryParams.bizType == 'BUY_VIP'">
      <el-row :gutter="24" class="mb8 ml8">
        <el-button type="primary" class="handleAdd" @click="handleAdd">
          新增
        </el-button>
      </el-row>
      <el-table v-loading="loading" :data="typeList">
        <el-table-column
          label="会员等级"
          align="center"
          width="100"
          prop="userLevel"
        />
        <el-table-column
          label="充值年数"
          align="center"
          width="100"
          prop="year"
        />
        <el-table-column label="发放贡献值" align="center" prop="score">
          <template #default="scope">
            {{ scope.row.score + "%" }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="left" prop="remark" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <a
              href="javascript:;"
              style="color: #358de5; text-decoration: none; margin-right: 10px"
              @click="handleEdit(scope.row)"
              >编辑</a
            >
            <a
              href="javascript:;"
              style="color: #fcb80b; text-decoration: none; margin-right: 10px"
              @click="handleCancel(scope.row)"
              >删除</a
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="queryParams.bizType == 'LEVEL_PROMOTE'">
      <el-row :gutter="24" class="mb8 ml8">
        <el-button type="primary" class="handleAdd" @click="handleAdd">
          新增
        </el-button>
      </el-row>
      <el-table v-loading="loading" :data="typeList">
        <el-table-column
          label="晋升后等级"
          align="center"
          width="100"
          prop="userLevel"
        />
        <el-table-column label="发放贡献值" align="center" prop="score" />
        <el-table-column label="备注" align="left" prop="remark" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <a
              href="javascript:;"
              style="color: #358de5; text-decoration: none; margin-right: 10px"
              @click="handleEdit(scope.row)"
              >编辑</a
            >
            <a
              href="javascript:;"
              style="color: #fcb80b; text-decoration: none; margin-right: 10px"
              @click="handleCancel(scope.row)"
              >删除</a
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="queryParams.bizType == 'ADVICE'">
      <el-row :gutter="24" class="mb8 ml8">
        <el-button type="primary" class="handleAdd" @click="handleAdd">
          新增
        </el-button>
      </el-row>
      <el-table v-loading="loading" :data="typeList">
        <el-table-column label="发放贡献值" align="center" prop="score" />
        <el-table-column label="备注" align="left" prop="remark" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <a
              href="javascript:;"
              style="color: #358de5; text-decoration: none; margin-right: 10px"
              @click="handleEdit(scope.row)"
              >编辑</a
            >
            <a
              href="javascript:;"
              style="color: #fcb80b; text-decoration: none; margin-right: 10px"
              @click="handleCancel(scope.row)"
              >删除</a
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form
        @submit.native.prevent
        :model="form"
        :rules="rules"
        ref="formRef"
        label-width="120px"
      >
        <el-row>
          <el-col :span="24" v-if="queryParams.bizType == 'LEVEL_PROMOTE'">
            <el-form-item label="晋升后等级" prop="userLevel">
              <el-input
                type="“number"
                v-model="form.userLevel"
                placeholder="请输入"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="queryParams.bizType == 'BUY_VIP'">
            <el-form-item label="会员等级" prop="userLevel">
              <el-input
                type="“number"
                v-model="form.userLevel"
                placeholder="请输入"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="queryParams.bizType == 'BUY_VIP'">
            <el-form-item label="充值数量（年）" prop="year">
              <el-input
                type="“number"
                v-model="form.year"
                placeholder="请输入"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="queryParams.bizType == 'BUY_BALANCE' || queryParams.bizType == 'BUY_VIP'">
            <el-form-item label="发放贡献值" prop="score">
              <el-input
                type="“number"
                v-model="form.score"
                placeholder="请输入"
                :min="1"
              >
                <template v-slot:append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-else>
            <el-form-item label="发放贡献值" prop="score">
              <el-input
                type="“number"
                v-model="form.score"
                placeholder="请输入"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入"
                v-model="form.remark"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer v-if="title !== '详情'">
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(formRef)">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="credit">
let { proxy } = getCurrentInstance();
import { onMounted, ref } from "vue";
import {
  queryScorePage,
  editScore,
  deleteScore,
  addScore,
} from "@/api/contribution";
const router = useRouter();
const title = ref("新增");
const open = ref(false);
const formRef=ref(null)
const loading = ref(true);
const typeList = ref([]);
const form = ref({
  id: null,
  score: "",
  remark: "",
  userLevel:0,
  year:0
});

const rules = ref({
  year: [{ required: true, message: "年数不能为空", trigger: "blur" }],
  userLevel: [{ required: true, message: "等级不能为空", trigger: "blur" }],
  score: [{ required: true, message: "贡献值不能为空", trigger: "blur" }],
  remark: [{ required: true, message: "备注不能为空", trigger: "blur" }],
});

const queryParams = ref({
  bizType: "BUY_BALANCE",
  sourceType: 2,
});
const tabs = ref([
  {
    name: "购买渡币贡献值",
    value: "BUY_BALANCE",
  },
  {
    name: "充值会员贡献值",
    value: "BUY_VIP",
  },
  {
    name: "会员晋升贡献值",
    value: "LEVEL_PROMOTE",
  },
  {
    name: "建议贡献值",
    value: "ADVICE",
  },
]);
//查询列表
const getList = async () => {
  try {
    let params = {
      ...queryParams.value,
    };
    loading.value = true;
    let result = await queryScorePage(params);
    loading.value = false;
    if (result.code == 200) {
      typeList.value = result.rows;
      total.value = Number(result.total);
    }
  } catch (e) {
    loading.value = false;
  }
};

//重置
const reset = () => {
  form.value = {
    id: null,
    score: "",
    remark: "",
    userLevel:0,
    year:0,
  };
};

//tab
const changeTab = (e) => {
  queryParams.value.bizType = e;
  getList();
};

//新增
const handleAdd = () => {
  title.value = "新增";
  reset();
  open.value = true;
};

//编辑
const handleEdit = (e) => {
  title.value = "编辑";
  form.value={
    id: e.id,
    score: e.score,
    remark: e.remark,
    userLevel:e.userLevel || null,
    year:e.year || null
  }
  open.value = true;
};

/** 删除按钮操作 */
const handleCancel = (row) => {
  proxy.$modal
    .confirm("是否确认要删除该条配置吗")
    .then(() => {
      return deleteScore(row.id);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
};

const submitForm = async (e) => {
  try {
    if (!e) return;
    await e.validate(async (valid, fields) => {
      if (valid) {
        proxy.$modal.loading("加载中...");
        let params={
          ...form.value,
          ... queryParams.value
        }
        if (form.value.id) {
          editScore(params).then((response) => {
            proxy.$modal.msgSuccess("编辑成功");
            open.value = false;
            getList();
          });
        } else {
          addScore(params).then((response) => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        }
        proxy.$modal.closeLoading();
      }
    });
  } catch (e) {
    proxy.$modal.closeLoading();
    showSet.value = false;
  }
};

const cancel = () => {
  showSet.value = false;
};

onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.ml8 {
  padding-left: 10px;
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: end;
}
</style>
